<template>
  <div class="home" style="margin-top:0">
    <!-- 头部 -->
    <header class="header-container wrap" :class="{'active': isOpacity}">
      <router-link tag="i" to="./category">
        <van-icon name="bag-o" :style="{color: !isOpacity ? '' : '#fff'}" />
      </router-link>
      <div class="header-search">
        <span class="name">新蜂商城</span>
        <van-icon name="search" />
        <router-link tag="span" class="search-title" to="./shoplist?from=home">山河无恙，人间皆安</router-link>
      </div>
      <router-link class="login" tag="span" to="./login" v-show="!isLogin">登录</router-link>
      <router-link class="login" tag="span" to="./mine" v-show="isLogin">
        <van-icon name="manager-o" />
      </router-link>
    </header>
    <!-- 轮播图 -->
    <Swiper :swipers="swiperlist" />
    <!-- 分类 -->
    <div class="category">
      <div v-for="item in categorylist" v-bind:key="item.categoryId" @click="$Toast('敬请期待')">
        <img :src="item.imgUrl">
        <span>{{item.name}}</span>
      </div>
    </div>
    <!-- 商品列表 -->
    <Shoplist :title="'新品上线'" @seeDetail="seeDetail" :shoplist="newGoods" />
    <Shoplist :title="'热门商品'" @seeDetail="seeDetail" :shoplist="hots" />
    <Shoplist :isBottom="true" :title="'最新推荐'" @seeDetail="seeDetail" :shoplist="recommends" />
  </div>
</template>

<script setup>
import {ref, onMounted, onUnmounted, nextTick, defineAsyncComponent} from 'vue'
import {useRouter} from 'vue-router'
import {Toast} from 'vant'
import useUserStore from '@/store/user'
import {getHomeData} from '@/service/home'
import {categorylist} from '@/plugins/mock'
import {countDown} from '@/utils/utils'

const Swiper = defineAsyncComponent(() => import('@/components/Swiper'))
const Shoplist = defineAsyncComponent(() => import('@/components/Shoplist'))

const router = useRouter()
const userStore = useUserStore()

const isLogin = ref(userStore.isLogin)
const swiperlist = ref([])
const newGoods = ref([])
const hots = ref([])
const recommends = ref([])
const isOpacity = ref(false)

onMounted(async () => {
  console.log(countDown('2022-2-17 18:00:00'))
  Toast.loading('加载中...')
  const {data} = await getHomeData()
  swiperlist.value = data.carousels
  newGoods.value = data.newGoodses
  hots.value = data.hotGoodses
  recommends.value = data.recommendGoodses
  Toast.clear()
})
onUnmounted(() => {
  window.removeEventListener('scroll', hasOpacity)
})

nextTick(() => {
  window.addEventListener('scroll', hasOpacity)
})

// 头部是否透明
function hasOpacity() {
  let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
  scrollTop > 100 ? isOpacity.value = true : isOpacity.value = false
}
// 跳转详情
function seeDetail(e) {
  console.log(e)
  router.push({path: `/shopdetail/${e.goodsId}`})
}
</script>

<style lang="less" scoped>
@import '@/assets/style/var.less';
@import '@/assets/style/mixin.less';

// 头部
.header-container {
  position: fixed;
  left: 0;
  top: 0;
  .wh(100%, 50px);
  .fj();
  line-height: 50px;
  padding: 0 15px;
  .boxSizing();
  font-size: 15px;
  color: #fff;
  z-index: 10000;
  .nbmenu2 {
    color: @primary;
  }
  &.active {
    background: @primary;
    .nbmenu2 {
      color: #fff;
    }
    .login {
      color: #fff;
    }
  }
  .header-search {
    display: flex;
    .wh(74%, 20px);
    line-height: 20px;
    margin: 10px 0;
    padding: 5px 0;
    color: #232326;
    background: rgba(255, 255, 255, .7);
    border-radius: 20px;
    .name {
      padding: 0 10px;
      color: @primary;
      font-size: 18px;
      font-weight: bold;
      line-height: 20px;
      border-right: 1px solid @color-text-l;
    }
    .icon-search {
      padding: 0 10px;
      font-size: 17px;
    }
    .search-title {
      font-size: 12px;
      color: @color-text-l;
      line-height: 21px;
    }
  }
  .icon-iconyonghu{
    color: #fff;
    font-size: 22px;
  }
  .login {
    color: @primary;
    line-height: 52px;
    .van-icon-manager-o {
      font-size: 20px;
      vertical-align: -3px;
    }
  }
}
// 分类
.category {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  width: 100%;
  padding-bottom: 13px;
  div {
    display: flex;
    flex-direction: column;
    width: 20%;
    text-align: center;
    font-size: @font-size-s;
    img {
      .wh(36px, 36px);
      margin: 13px auto 8px auto;
    }
  }
}
</style>